<template>
  <div id="app">
    <table class="tb">
      <tr>
        <th>欢迎光临xx水果店</th>
      </tr>
      <tr>
        <td>苹果10￥/斤,折扣(8折)</td>
      </tr>
      <tr>
        <td>
          请输入您购买的斤数
          <input type="text" placeholder="0" v-model.number="num" />
        </td>
      </tr>
      <tr>
        <td>
          结账单:总价: <span>{{ total ? total : 0 }}</span> ￥元 折扣价:
          <span>{{ Discount ? Discount : 0 }}</span> ￥元 省了:
          <span>{{ save ? save : 0 }}</span
          >￥元
        </td>
      </tr>
      <tr>
        <td><button @click="clickFn">结账</button></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: '',
      total: '',
      Discount: '',
      save: '',
    }
  },
  methods: {
    clickFn() {
      this.total = this.num * 10
      this.Discount = this.total * 0.8
      this.save = this.total - this.Discount
    },
  },
}
</script>

<style>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: skyblue;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}
.tb th {
  font-size: 20px;
}
.tb td {
  font-size: 16px;
  font-weight: 700;
}
.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>
